import React, { useEffect, useState } from 'react';
import { useSewTask } from 'dw-mx-sew';
import { Button, Col, Form, Input, Row, Select, Space } from 'dw-mx';
import { request } from 'dw-mx-request';

export default function UTCDemo() {
    const [form] = Form.useForm();

    // 流程任务
    const sewTask = useSewTask();

    useEffect(() => {
        // 监听流程任务事件
        sewTask.registerEventListeners({
            onsubmit: onsubmit,
            onvalid: onvalid,
            onbatchsubmit: onbatchsubmit,
            onbatchvalid: onbatchvalid,
        });

        // 获取流程变量
        const processVars = sewTask.getProcessVars();
        console.log(processVars.getPiid());
    }, []);

    // 单个业务单据提交
    const onsubmit = async () => {
        try {
            // TODO 请求业务系统，对表单数据进行提交
            const submitFlag = await request('/mock/sew/utc/submit');

            // TODO 拼返回给万达的参数，return给UTP
            const onSubmitResult = {
                result: '1', // 检验结果.1成功 0失败
                businessNo: 'NO3701010001', // 办件流水号
                flowProps: { path: '1' }, // 流程条件参数
                aaa027: '370101', // 统筹区
                archives: [
                    // 出件信息集合
                    { archiveCode: '', pageId: '' }, // 材料编号  |  档案库id
                ],
            };
            return onSubmitResult;
        } catch (e) {
            console.error(e);
            throw new Error('onsubmit事件执行失败，请检查！');
        }
    };

    // 单个业务单据校验
    const onvalid = async () => {
        // TODO 请求业务系统，对表单数据进行校验
        const validFlag = await request('/mock/sew/utc/valid');

        // TODO 拼返回给万达的参数，return给UTP
        const onValidResult = {
            validate: '1', // 检验结果.1成功 0失败
            businessNo: '', // 办件流水号
            flowProps: { path: '1' }, // 流程条件参数
            aaa027: '', // 统筹区
        };
        return onValidResult;
    };

    // 批量提交
    const onbatchsubmit = async () => {
        // TODO 请求业务系统，对表单数据进行提交
        const submitFlag = await request('/mock/sew/utc/batchsubmit');

        // TODO 拼返回给万达的参数，return给UTP
        const onSubmitResult = {
            result: '1', // 提交结果
            resultInfo: '提交信息', // 提示信息
            flowProps: { path: '1' }, // 流程条件参数
            aaa027: '320101', // 统筹区
            // 办件信息集合
            businessSet: [
                {
                    businessNo: '123', // 办件流水号
                    archives: [
                        // 出件信息集合
                        { archiveCode: 'ZM-001', pageId: 'abc001' }, // 材料编号  |  档案库id
                        { archiveCode: 'ZM-002', pageId: 'abc002' },
                    ],
                },
                {
                    businessNo: '321',
                    archives: [
                        { archiveCode: 'ZM-001', pageId: 'abc001' },
                        { archiveCode: 'ZM-002', pageId: 'abc002' },
                    ],
                },
            ],
        };
        return onSubmitResult;
    };

    // 批量校验
    const onbatchvalid = async () => {
        // TODO 请求业务系统，对表单数据进行校验
        const validFlag = await request('/mock/sew/utc/batchvalid');

        // TODO 拼返回给万达的参数，return给UTP
        const onValidResult = {
            validate: '1', // 检验结果
            flowProps: { path: '1' }, // 流程条件参数
            aaa027: '320101', // 统筹区
            businessSet: [
                // 办件信息集合
                { businessNo: '123' }, // 办件流水号
                { businessNo: '321' },
            ],
        };
        return onValidResult;
    };

    const onClick = async (value) => {
        // 可以从外部取值
        console.log(form.getFieldsValue());

        // 可以验证必填项
        try {
            const values = await form.validateFields();
            console.log('Success:', values);
        } catch (errorInfo) {
            // 验证失败
            console.log('Failed:', errorInfo);
        }
    };

    const onChange = (value) => {
        // 可以监听 onchange
        alert(value);
    };

    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
    };

    return (
        <>
            <Form form={form} {...layout} layout={'horizontal'}>
                <Row>
                    <Col span={8}>
                        <Form.Item label="piid" name="piid" rules={[{ required: true }]}>
                            <Input onChange={onChange} placeholder={'piid'} maxLength={10} />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="eid" name="eid" rules={[{ required: true }]}>
                            <Input onChange={onChange} placeholder={'eid'} maxLength={10} />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="tid" name="tid" rules={[{ required: true }]}>
                            <Input onChange={onChange} placeholder={'tid'} maxLength={10} />
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <Form.Item label="tname" name="tname" rules={[{ required: true }]}>
                            <Input onChange={onChange} placeholder={'tname'} maxLength={10} />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="tctime" name="tctime" rules={[{ required: true }]}>
                            <Input onChange={onChange} placeholder={'tctime'} maxLength={10} />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="bljgid" name="bljgid" rules={[{ required: true }]}>
                            <Input onChange={onChange} placeholder={'bljgid'} maxLength={10} />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </>
    );
}
